<template>
  <lan-dialog
    :config="addConfig"
    :formData="deviceSettingForm"
  >
    <template #slot="scope">
      <el-input
        v-model="scope.data.slot"
        class="form-input"
      ></el-input>
    </template>
    <template #setting="scope">
      <el-input
        :style="{width: 300 + 'px'}"
        class="input-text-area"
        type="textarea"
        :rows="2"
        v-model="scope.data.setting"
        placeholder="请输入json格式的自定义参数"
      ></el-input>
    </template>
  </lan-dialog>
</template>

<script>
import lanDialog from '../../../components/lanDialog';
import { Message } from 'element-ui';
import { parseError } from '../../../utils/index';
import { createDeviceSettingApi } from '../../../api/deviceSetting';
import { validateForm } from './service';
import { queryProductTypeListApi } from '../../../api/productType';
import { parse } from 'uuid';

export default {
  components: { lanDialog },
  data() {
    this.formLabelWidth = '140px';
    return {
      addConfig: {
        labelWidth: 200,
        dialogVisible: false,
        title: '添加配置参数',
        type: 'add',
        inline: false,
        formList: [
          {
            name: 'name',
            label: '名称',
            type: 'input',
            placeholder: '请输入名称',
            required: true,
            tooltip: '产品参数的名称',
            width: 300
          },
          {
            name: 'versionName',
            label: '版本号',
            type: 'input',
            placeholder: '请输入版本号',
            required: true,
            tooltip: '产品参数的版本号，仅支持Major.Minor.Build格式，如1.0.0',
            width: 300
          },
          {
            label: '产品类型',
            name: 'productTypeUuid',
            type: 'remoteSelect',
            options: () => this.deviceTypeList,
            optionValue: 'uuid',
            optionLabel: 'name',
            placeholder: '请选择产品类型',
            tooltip: '产品参数所属的产品类型',
            query: this.remoteDeviceTypeSearch,
            width: 300
          },
          {
            type: 'slot',
            label: '自定义参数',
            name: 'setting',
            tooltip: '产品参数的自定义参数内容（JSON 格式）',
            required: true,
            width: 300
          },
          {
            label: '允许升级',
            name: 'active',
            type: 'select',
            options: () => this.activeOptionList,
            optionValue: 'value',
            optionLabel: 'label',
            placeholder: '允许升级',
            tooltip: '产品参数是否允许升级',
            required: true,
            width: 300
          },
          {
            name: 'description',
            label: '备注',
            type: 'input',
            placeholder: '请输入备注',
            tooltip: '产品参数的备注信息',
            width: 300
          }
        ],
        buttons: [
          {
            text: '取消',
            icon: '',
            type: '',
            method: () => {
              this.addConfig.dialogVisible = false;
            }
          },
          {
            text: '确认',
            icon: '',
            type: 'primary',
            method: () => {
              this.add();
              this.addConfig.dialogVisible = false;
            }
          }
        ]
      },
      activeOptionList: [
        {
          label: '允许',
          value: true
        },
        {
          label: '不允许',
          value: false
        }
      ],
      remoteLoading: false,
      dialogVisible: false,
      btnLoading: false,
      deviceSettingForm: {
        name: '',
        description: '',
        versionName: '',
        setting: '',
        active: true,
        deviceTypeUuid: ''
      },
      deviceTypeList: []
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.$refs.addDeviceSettingForm.resetFields();
        }
      }
    }
  },
  methods: {
    showDialog() {
      this.remoteDeviceTypeSearch();
      this.addConfig.dialogVisible = true;
    },
    add() {
      const validError = validateForm(this.deviceSettingForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      // const setting = {};
      // this.deviceSettingForm.settings.forEach(item => (setting[item.name] = item.value));
      // Object.assign(setting, JSON.stringify(this.deviceSettingForm.setting));
      createDeviceSettingApi(
        this.deviceSettingForm.name,
        this.deviceSettingForm.description,
        this.deviceSettingForm.versionName,
        JSON.parse(this.deviceSettingForm.setting),
        this.deviceSettingForm.active,
        this.deviceSettingForm.deviceTypeUuid
      )
        .then(res => {
          Message.success('添加成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteDeviceTypeSearch(name) {
      queryProductTypeListApi(name, 100)
        .then(
          res =>
            (this.deviceTypeList = res.map(deviceType => {
              return {
                uuid: deviceType.uuid,
                name: deviceType.name
              };
            }))
        )
        .catch(error => Message.error(parseError(error)));
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-form-item {
  margin-bottom: 22px !important;
}
.input {
  width: 300px;
}

.settings {
  &-name {
    width: 80px;
  }
  &-value {
    width: 200px;
    margin: 0 20px;
  }
}
.buttons {
  &-add {
    margin-right: 20px;
  }
}
</style>
